<div ng-controller="DeviceCtrl">

  <fieldset class="row" ng-disabled="device.status() !== 'connected'">

    <div class="devinfo col-md-12" ng-hide="device.isEmpty()">
      <ng-include src="'views/device/index.info.html'"></ng-include>
    </div>

    <div class="devsetup col-md-8" ng-show="device.isEmpty()">
      <ng-include src="'views/device/index.setup.html'"></ng-include>
    </div>

    <div class="devrestore col-md-4 text-center" ng-show="device.isEmpty()">
      <p class="help-block" translate="device.index.recovery-question">Want to restore your wallet from recovery seed?</p>
      <a class="btn btn-default"
         ng-href="#/device/{{device.id}}/recovery"
         translate="device.index.recovery"
        >BWallet Recovery</a>
    </div>

  </fieldset>

  <div class="row"
       ng-if="device.accounts.length"
       ng-controller="DeviceInfoCtrl">

    <div class="col-xs-12">
      <div class="line-divider"
           ng-hide="advanced">
        <hr>
        <div class="line-divider-content text-center">
          <button class="btn btn-xs btn-default"
                  ng-click="advanced = !advanced">
            {{ 'device.index.advanced-details' | translate }}
            <span class="caret"></span>
          </button>
        </div>
      </div>

      <div ng-show="advanced">
        <hr>
        <div class="row">
          <div class="col-md-8">
            <h4 translate="device.index.account-public-keys">Account public keys (XPUB)</h4>
            <p>
              <span class="text-danger" translate="device.index.xpub-advice">Be careful with your account XPUB.</span> {{ 'device.index.xpub-advice-message' | translate }}
            </p>
            <ul class="nav nav-devices-accounts text-break">
              <li ng-repeat="account in device.accounts"
                  ng-mouseenter="highlightXpub(account.publicKey())"
                  ng-mouseleave="highlightXpub(null)"
                  class="text-muted">
                <small>
                  <strong>{{account.label()}}</strong><br/>{{account.publicKey()}}
                </small>
              </li>
            </ul>
            <p class="alert alert-info alert-withicon">
              <span class="glyphicon glyphicon-info-sign alert-icon"></span>
              <strong translate="device.index.hint">Hint:</strong> <span translate="device.index.hint-message"></span>
            </p>
          </div>
          <div class="col-md-4">
            <div ng-if="highlightedXpub">
              <qr size="150" text="highlightedXpub"></qr>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-8">
          	<h4 translate="">Bootloader hash</h4>
            <p>
              {{device.bootloaderHash()}}
            </p>
          </div>
        </div>
        <hr>
        <div class=row>
            <div class="col-md-2 settings-left" translate="device.index.firmware.title">
                Firmware
            </div>
            <div class="col-md-10 settings-right">
                {{device.firmwareString()}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 settings-left" translate="device.index.passphrase.title">
                Passphrase
            </div>
            <div class="col-md-6 settings-right" ng-hide="device.features.passphrase_protection"
            ng-init="userUnderstandsPassphrase = false">
                <p translate="device.index.passphrase.enable.message1">
                    Passphrase encryption allows you to access new wallets, each hidden behind
                    a particular passphrase. Your old accounts will be accessible behind an
                    empty passphrase.
                </p>
                <p>
                    <b translate="device.index.passphrase.enable.message2">
                        If you forget your passphrase, your wallet is lost for good. There is
                        no way to recover your funds.
                    </b>
                </p>
                <!--
                <a href="#">
                    Read more in user manual
                </a>
                -->
                <p class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="userUnderstandsPassphrase">
                        {{ 'device.index.passphrase.understand' | translate }}
                    </label>
                </p>
                <span tooltip="{{device.isConnected() ? null : 'device.index.passphrase.enable.tooltip' | translate}}"
                tooltip-trigger="mouseenter" tooltip-placement="right" tooltip-append-to-body="true"
                class="tooltip-trigger">
                    <button class="btn btn-default btn-sm" ng-click="togglePassphrase(true)"
                    ng-disabled="!device.isConnected() || !userUnderstandsPassphrase">
                        <span class="glyphicon glyphicon-ok">
                        </span>
                        <span translate="device.index.passphrase.enable">
                            Enable passphrase encryption
                        </span>
                    </button>
                </span>
            </div>
            <div class="col-md-6 settings-right" ng-show="device.features.passphrase_protection"
            ng-init="userUnderstandsPassphrase = false">
                <p translate="device.index.passphrase.disable.message">
                    <b>
                        If you disable the passphrase encryption, your current funds will not
                        appear.
                    </b>
                    You will have to enable the passphrase encryption again to see your current
                    wallet.
                </p>
                <!--
                <p>
                    <a href="#">
                        Read more in user manual
                    </a>
                </p>
                -->
                <p class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="userUnderstandsPassphrase">
                        {{ 'device.index.passphrase.understand' | translate }}
                    </label>
                </p>
                <span tooltip="{{device.isConnected() ? null : 'device.index.passphrase.disable.tooltip' | translate}}"
                tooltip-trigger="mouseenter" tooltip-placement="right" tooltip-append-to-body="true"
                class="tooltip-trigger">
                    <button class="btn btn-default btn-sm" ng-click="togglePassphrase(false)"
                    ng-disabled="!device.isConnected() || !userUnderstandsPassphrase">
                        <span class="glyphicon glyphicon-remove hidden-xs hidden-sm hidden-md">
                        </span>
                        <span translate="device.index.passphrase.disable">
                            Disable passphrase encryption
                        </span>
                    </button>
                </span>
            </div>
        </div>
        <hr>
        <div class="row" ng-show="device.features.pin_protection">
            <div class="col-md-2 settings-left" translate="device.index.pin.disable">
                Disable PIN
            </div>
            <div class="col-md-2 settings-btn" tooltip="{{device.isConnected() ? null : 'device.index.pin.disable.tooltip' | translate}}"
            tooltip-trigger="mouseenter" tooltip-placement="right" tooltip-append-to-body="true">
                <button class="btn btn-default btn-sm" ng-click="changePin(true)" ng-disabled="!device.isConnected()">
                    <span class="glyphicon glyphicon-remove hidden-xs hidden-sm hidden-md">
                    </span>
                    <span translate="device.index.pin.disable">
                        Disable PIN
                    </span>
                </button>
            </div>
        </div>
        <div class="row" ng-enabled="!device.isConnected()" ng-show="device.features.pin_protection">
            <div class="col-md-2">
            </div>
            <p class="text-muted col-md-6" translate="device.index.info.pin-protection-message">
                Using PIN protection is highly recommended. PIN prevents unauthorized
                persons from stealing your bitcoins even when they get physical access
                to your device.
            </p>
        </div>
        <hr ng-show="device.features.pin_protection">
        <div class="row">
            <div class="col-md-2 settings-left" translate="device.index.wipe-device">
                Wipe device
            </div>
            <div class="col-md-6 wipe-text">
                <p translate="device.index.wipe.message1">
                    Wiping the device
                    <b>
                        removes all its information.
                    </b>
                </p>
                <p translate="device.index.wipe.message2">
                    Use this feature only if you have your Recovery Seed or you don't have
                    any coins on your device.
                </p>
                <div ng-controller="DeviceWipeCtrl">
                    <div class="pull-left" tooltip="{{device.status() !== 'connected' ? ('device.index.wipe.tooltip' | translate) : null}}"
                    tooltip-trigger="mouseenter" tooltip-placement="bottom" tooltip-append-to-body="true">
                        <a class="btn btn-danger wipe-button" href="" ng-click="wipeDevice()" ng-disabled="device.status() !== 'connected'">
                            <span class="glyphicon glyphicon-fire">
                            </span>
                            {{ 'device.index.wipe-device' | translate }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
